<template>
    <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange"
        :page-size="pageSize">
    </el-pagination>
</template>
<script>
export default {
    props: ['total', 'pageSize', 'current'],
    data() {
        return {
            current: 1,
        }
    },
    methods: {
        currentChange(current) {
            this.current = current
            this.$emit('currentChange', this.current)
        },
    },
}
</script>
<style lang="less" scoped>
.el-pagination {
    float: right;
    cursor: pointer;
    margin-top: 15px;
}

.el-button--primary {
    width: 84px;
    height: 34px;
    background: #031231;
    opacity: 1;
    border: 0px solid #5B9FC3;
    color: white;
    font-size: 10px;
}

.el-pagination /deep/ .btn-prev {
    height: 100% !important;

}

.el-pagination /deep/ .btn-next {
    height: 100% !important;

}

.el-pagination /deep/ .el-pager {
    height: 100% !important;

    li {
        height: 100% !important;
    }
}

.el-pagination /deep/ .el-pager {
    height: 34px !important;

    li {
        width: 30px !important;
        height: 30px !important;
        border: 1px solid #5B9FC3;
        color: #BDE5FD;
    }
}

.el-pagination /deep/ .btn-prev,
.el-pagination /deep/ .el-pager .number,
.el-pagination /deep/ .btn-next,
.el-pagination /deep/ .el-icon,
.el-pagination /deep/ .is-background .el-pager li {

    line-height: 30px;

    background-color: #031231 !important;
}

.el-pagination /deep/ .el-icon {
    width: 27px;
    height: 27px;
    color: #BDE5FD;
    border: 1px solid #5B9FC3;
}
</style>